<template>
    <div>
      111111111111
      <el-container>
        
        <el-aside width="240px">
            <div class="Mertitle">商家中心</div>
          <!-- <el-menu default-active="/merchants/merInfor" class="el-menu-vertical-demo" router>
            <el-menu-item index="/merchants/merInfor">
                <span slot="title">商家信息</span>
            </el-menu-item>
              <el-menu-item index="/merchants/merorder">
                <span slot="title">订单列表</span>
            </el-menu-item>
            <el-menu-item index="/merchants/mergoods">
                <span slot="title">商品列表</span>
            </el-menu-item>
          </el-menu> -->
          <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" router>
          <div v-for="item in meamData" :key="item.name">
        <div v-if="!item.children">
            <el-menu-item @click="clickmemu(item)" :key="item.name" :index="item.name" >
    
            <span slot="title">{{item.label}}</span>
            </el-menu-item> 
        </div>
        
        <div v-if="item.children">
        <el-submenu :index="item.name">
        <template slot="title">
         
          <span>{{item.label}}</span>
            </template>
            <el-menu-item-group>
            <el-menu-item @click="clickmemu(ch)" v-for="ch in item.children" :index="ch.name" :key="ch.name">{{ch.label}}</el-menu-item>
            
            </el-menu-item-group>
        
      </el-submenu>
        </div>

      </div>
    </el-menu>

        </el-aside>
        <el-container>
          <el-header>{{headerT}}</el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
 
  
  <script>
  
  export default {
    name: 'Merchants',
    // components: {},
    // props:{
    //     names:{
    //         type:Array,
    //         default:()=>{return []}
    //     }
    // },
        

    data() {
      return {
       // headerTxt:{'/merchants/merInfor':'商家信息', '/merchants/merorder': '订单列表', '/merchants/mergoods':'商品列表'},
       meamData:[
                {
                    path:"merInfor",
                    name:"merInfor",
                    label:"商家信息",
                    url: "/merInfor",
                },
                // {
                //     path:"/merchants/merorder",
                //     name:"/merchants/merorder",
                //     label:"订单列表",
                //     url: "/merchants/merInfor",
                // },
                // {
                //     path:"/merchants/mergoods",
                //     name:"/merchants/mergoods",
                //     label:"商品管理",
                //     url: "/merchants/mergoods",
                //     children:[
                //         {
                //             path:"/merchants/mergoods",
                //             name:"/merchants/mergoods",
                //             label:"商品列表",
                //             url: "//merchants/mergoods",
                //         },
                //         {
                //             path:"/merchants/mergoods",
                //             name:"/merchants/mergoods",
                //             label:"商品分类",
                //             url: "//merchants/mergoods",
                //         },
                        
                //       ]
                // },

            ],
            defaultActive:"/merInfor"
      }
    },

    computed: {
       headerT(){
        var path = this.$route.path
        var txt = this.headerTxt[path]
        return txt
       }
    },
    created() {
        // console.log(this.$route.path)
        // var pathlist = this.$route.path.split('/')
        // this.defaultActive = pathlist[pathlist.length-1]
    },
    methods: {
    //   handleOpen(key, keyPath) {
    //     // console.log(key, keyPath);
    //   },
    //   handleClose(key, keyPath) {
    //     // console.log(key, keyPath);
    //   },
      clickmemu(item){
        // console.log(item)
        this.$router.push(item.path)
        
    //    bus.$emit("routerTitle", item.label)
      },
    }
  }
  </script>
  <style lang="scss" scoped>
  .Mertitle{
    height: 50px;
    font-size: 20px;
    align-items: center;
    text-align: center;
    line-height: 50px;
  }
      .el-header {
  background-color: #FFFFFF;
  color: #333;
  line-height: 60px;
  height: 100%;
  text-align: left;
  font-size: 19px;
}

.el-aside {
  background-color: rgb(243,243,243);
  color: #333;
  height: 100vh;
}
/deep/ .el-menu{
    background-color: rgb(243,243,243);
}

.el-main {
  background-color: #FFFFFF;
  color: #333;
}

  </style>
  